<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>“虚拟机上部署一个前后端分离项目（若依-ruoyi）实验” | rongshen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/highlight.css">

  
  <meta name="description" content="来源于B站UP主CodeSheep。">
<meta property="og:type" content="article">
<meta property="og:title" content="“虚拟机上部署一个前后端分离项目（若依-ruoyi）实验”">
<meta property="og:url" content="http://example.com/2020/06/30/%E2%80%9C%E8%99%9A%E6%8B%9F%E6%9C%BA%E4%B8%8A%E9%83%A8%E7%BD%B2%E4%B8%80%E4%B8%AA%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%EF%BC%88%E8%8B%A5%E4%BE%9D-ruoyi%EF%BC%89%E5%AE%9E%E9%AA%8C%E2%80%9D/index.html">
<meta property="og:site_name" content="rongshen">
<meta property="og:description" content="来源于B站UP主CodeSheep。">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a1.jpg">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a2.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a3.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a4.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a5.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a6.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a7.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a8.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a9.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a10.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a11.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a12.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a13.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a14.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a15.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a22.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a23.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a24.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a25.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a26.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a27.png">
<meta property="og:image" content="http://cdn.rongshen2020.com/2020630a2.png">
<meta property="article:published_time" content="2020-06-30T13:27:46.000Z">
<meta property="article:modified_time" content="2021-05-07T06:36:32.911Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="实验">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://cdn.rongshen2020.com/2020630a1.jpg"><meta name="generator" content="Hexo 6.1.0"></head>

<body>
  <div id="wrapper">
    <header id="header">
  <h1 id="title">
    <a href="/">rongshen</a>
  </h1>
  <nav>
    
    
      
      <a class="nav-link" href="/">Home</a>
    
      
        <span class="nav-spacer">×</span>
      
      <a class="nav-link" href="/archives">Archives</a>
    
      
        <span class="nav-spacer">×</span>
      
      <a class="nav-link" target="_blank" rel="noopener" href="https://github.com/Aaron-boom">Github</a>
    
      
        <span class="nav-spacer">×</span>
      
      <a class="nav-link" href="/2020/04/13/About-Me/">About</a>
    
    
  </nav>
</header>

    <div id="content">
      <article id="post-“虚拟机上部署一个前后端分离项目（若依-ruoyi）实验”" class="article article-type-post" itemprop="blogPost" itemscope>
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 class="article-title" itemprop="headline name">
      “虚拟机上部署一个前后端分离项目（若依-ruoyi）实验”
    </h2>
  


        <div class="article-meta">
          <time class="article-date" datetime="2020-06-30T13:27:46.000Z" itemprop="datePublished">2020-06-30</time>

          
        </div>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
      
        <blockquote>
<p>来源于B站UP主CodeSheep。</p>
</blockquote>
<span id="more"></span>

<h1 id="若依（ruoyi）项目部署"><a href="#若依（ruoyi）项目部署" class="headerlink" title="若依（ruoyi）项目部署"></a><center>若依（ruoyi）项目部署</center></h1><blockquote>
<p>该项目是B站UP主程序羊CodeSheep的一个开源在gitee上的项目，参照他的讲解，将这个项目部署在本地的虚拟机上。</p>
</blockquote>
<h1 id="1-项目简介"><a href="#1-项目简介" class="headerlink" title="1. 项目简介"></a>1. 项目简介</h1><ul>
<li><p>这是个一个前后端分离的权限管理系统。</p>
</li>
<li><p>项目来源于：<a target="_blank" rel="noopener" href="https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project">https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project</a></p>
</li>
<li><p>前端采用Vue、Element UI。</p>
</li>
<li><p>后端采用Spring Boot、Spring Security、Redis &amp; Jwt。</p>
</li>
<li><p>权限认证使用Jwt，支持多终端认证系统。</p>
</li>
<li><p>支持加载动态权限菜单，多方式轻松权限控制。</p>
<p><img src="http://cdn.rongshen2020.com/2020630a1.jpg"></p>
</li>
</ul>
<h1 id="2-虚拟机与环境准备"><a href="#2-虚拟机与环境准备" class="headerlink" title="2. 虚拟机与环境准备"></a>2. 虚拟机与环境准备</h1><ul>
<li><p>准备3台虚拟机，做好一些简单的配置，网卡、防火墙等等。。。</p>
</li>
<li><p>虚拟机的环境配置可以参考下图：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a2.png"></p>
</li>
</ul>
<h1 id="3-代码下载"><a href="#3-代码下载" class="headerlink" title="3. 代码下载"></a>3. 代码下载</h1><ul>
<li>网址：<a target="_blank" rel="noopener" href="https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project">https://gitee.com/y_project/RuoYi-Vue/blob/master/README.md#only_comment_project</a></li>
<li>使用git软件克隆到本地，因为我们还要用编译器做一些修改，之后再上传到服务器上：<pre><code class="bash">  git clone https://gitee.com/y_project/RuoYi-Vue.git
</code></pre>
</li>
</ul>
<h1 id="4-使用IDEA进行本地导入"><a href="#4-使用IDEA进行本地导入" class="headerlink" title="4. 使用IDEA进行本地导入"></a>4. 使用IDEA进行本地导入</h1><ul>
<li><p>上述步骤中下载好的代码，现在可以使用IDEA软件打开：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a3.png"></p>
</li>
</ul>
<h1 id="5-修改配置"><a href="#5-修改配置" class="headerlink" title="5. 修改配置"></a>5. 修改配置</h1><h2 id="5-1-修改数据库配置"><a href="#5-1-修改数据库配置" class="headerlink" title="5.1. 修改数据库配置"></a>5.1. 修改数据库配置</h2><ol>
<li><p>在IDEA中修改项目src目录下的resource下的application-druid.yml中的数据库配置，分别是数据库所在主机的ip地址，数据库用户名和密码：<br> <img src="http://cdn.rongshen2020.com/2020630a4.png"></p>
</li>
<li><p>在Navicat中创建ry-vue数据库：<br> <img src="http://cdn.rongshen2020.com/2020630a5.png"></p>
</li>
<li><p>将项目中的sql文件导入ry-vue数据库，创建表：</p>
<ul>
<li><p>对应的sql文件位于：<br>  <img src="http://cdn.rongshen2020.com/2020630a6.png"></p>
</li>
<li><p>导入成功后，ry-vue数据库中有30张表：<br> <img src="http://cdn.rongshen2020.com/2020630a7.png"></p>
</li>
</ul>
</li>
</ol>
<h2 id="5-2-修改Redis配置"><a href="#5-2-修改Redis配置" class="headerlink" title="5.2. 修改Redis配置"></a>5.2. 修改Redis配置</h2><ul>
<li>主要修改reids的ip地址和密码：<br><img src="http://cdn.rongshen2020.com/2020630a8.png"></li>
</ul>
<h2 id="5-3-修改日志配置"><a href="#5-3-修改日志配置" class="headerlink" title="5.3. 修改日志配置"></a>5.3. 修改日志配置</h2><ul>
<li>修改日志存放路径（本地路径）和日志的编码格式：<br> <img src="http://cdn.rongshen2020.com/2020630a9.png"></li>
</ul>
<h2 id="测试："><a href="#测试：" class="headerlink" title="测试："></a>测试：</h2><ul>
<li>跑一下，看是否还有故障：</li>
</ul>
<h1 id="6-项目上传、构建、打包"><a href="#6-项目上传、构建、打包" class="headerlink" title="6. 项目上传、构建、打包"></a>6. 项目上传、构建、打包</h1><h2 id="6-1-上传项目"><a href="#6-1-上传项目" class="headerlink" title="6.1. 上传项目"></a>6.1. 上传项目</h2><ul>
<li><p>借助Xftp工具将前端代码传到&#x2F;root&#x2F;ruoyi文件夹下（这里我使用先在本地压缩的方式，防止出现错误）：<br><img src="http://cdn.rongshen2020.com/2020630a10.png"><br>使用<code>unzip</code>命令进行解压。</p>
</li>
<li><p>同理，借助Xftp将后端代码也上传到其他的两台主机上。<br><img src="http://cdn.rongshen2020.com/2020630a11.png"></p>
</li>
</ul>
<h2 id="6-2-前端项目构建与打包"><a href="#6-2-前端项目构建与打包" class="headerlink" title="6.2. 前端项目构建与打包"></a>6.2. 前端项目构建与打包</h2><ul>
<li><p>先安装依赖，需要node.js的支持：<code>npm install --unsafe-perm --registry=https://registry.npm.taobao.org</code></p>
<p><img src="http://cdn.rongshen2020.com/2020630a12.png"></p>
</li>
<li><p>会多出两个文件：<br><img src="http://cdn.rongshen2020.com/2020630a13.png"></p>
</li>
<li><p>开始打包：<br><code>npm run build:prod</code></p>
</li>
<li><p>打包完成之后，会在当前前端项目的目录下生成一个dist目录：<br><img src="http://cdn.rongshen2020.com/2020630a14.png"></p>
</li>
</ul>
<h2 id="6-3-后端项目构建与打包（jar包）"><a href="#6-3-后端项目构建与打包（jar包）" class="headerlink" title="6.3. 后端项目构建与打包（jar包）"></a>6.3. 后端项目构建与打包（jar包）</h2><ul>
<li><p>进入到后端代码文件中<code>cd </code>,<br><code>mvn package</code></p>
</li>
<li><p>打包完成之后，会在当前目录下生成一个target文件，里面有我们需要的jar包：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a15.png"></p>
</li>
</ul>
<h2 id="6-4-后端项目构建与打包（war包）"><a href="#6-4-后端项目构建与打包（war包）" class="headerlink" title="6.4. 后端项目构建与打包（war包）"></a>6.4. 后端项目构建与打包（war包）</h2><ul>
<li><p>打war包之前需要先在本地修改一些后端代码。主要有修改pom文件中的打包形式、spring boot容器里面的内置tomcat服务器要去除、添加一个启动类。</p>
</li>
<li><p>pom文件中的打包形式：</p>
<pre><code class="java">  &lt;groupId&gt;com.ruoyi&lt;/groupId&gt;
  &lt;artifactId&gt;ruoyi&lt;/artifactId&gt;
  &lt;version&gt;2.3.0&lt;/version&gt;
  &lt;packaging&gt;war&lt;/packaging&gt;
</code></pre>
</li>
<li><p>pom文件中修改打包时的内置容器tomcat:</p>
<pre><code class="java">  &lt;!-- SpringBoot Web容器 --&gt;
  &lt;dependency&gt;
      &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
      &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
  &lt;/dependency&gt;
  &lt;!--添加如下代码--&gt;
  &lt;dependency&gt;
      &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
      &lt;artifactId&gt;spring-boot-starter-tomcat&lt;/artifactId&gt;
      &lt;scope&gt;provided&lt;/scope&gt;
  &lt;/dependency&gt;
</code></pre>
</li>
<li><p>添加启动类：<br>创建SpringBootStartApplication.class。<br>&#96;&#96;&#96;java<br>  package com.ruoyi;</p>
<p>  import org.springframework.boot.builder.SpringApplicationBuilder;<br>  import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;</p>
<p>  public class SpringBootStartApplication extends SpringBootServletInitializer {</p>
<pre><code>  @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) &#123;
      return builder.sources( RuoYiApplication.class );
  &#125;
</code></pre>
<p>  }</p>
</li>
</ul>
<pre><code>* 我们主要修改了这两个文件，那么我们只要将这两个文件重新上传到后端服务器上。


  ![](http://cdn.rongshen2020.com/2020630a16.png)

* 开始打war包：
  先执行下清理`mvn clean`将之前打jar包时的target文件清理掉。记得先将jar包拷贝出来。
  开始打包`mvn package`，之后生成target文件，里面有ruoyi.war了。war包需要放入tomcat中才可以运行的。

  ![](http://cdn.rongshen2020.com/2020630a17.png)
  
# 7. 项目服务器部署

## 7.1. 前端项目部署
* 在前端代码的主机上配置nginx，我的nginx是在/usr/local/nginx/conf/nginx.conf下，前端代码所在目录为/ruoyi/dist，修改如下代码：

  ![](http://cdn.rongshen2020.com/2020630a18.png)
  
  
  ![](http://cdn.rongshen2020.com/2020630a19.png)

* 启动nginx（nginx -s quit 正常停止或关闭Nginx），之后通过ip地址即可访问。


  ![](http://cdn.rongshen2020.com/2020630a20.png)

## 7.2. 后端项目部署
### 7.2.1. jar包部署
* 进入后端文件夹，执行jar包`nohup java -jar ruoyi.jar &amp;`

* 连接前后端，在前端随便输入验证码点击登录，F12查看页面代码：

  ![](http://cdn.rongshen2020.com/2020630a21.png)
  
* 重新进入nginx.conf文件中修改下配置，添加：
```java
location /prod-api/ &#123;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_pass http://192.168.3.23:8080/;
&#125;
</code></pre>
<p>  <img src="http://cdn.rongshen2020.com/2020630a22.png"></p>
<ul>
<li>重新加载下nginx：<code>/nginx -s reload</code>，之后便可以登录进入后台。</li>
</ul>
<h3 id="7-2-2-war包部署"><a href="#7-2-2-war包部署" class="headerlink" title="7.2.2. war包部署"></a>7.2.2. war包部署</h3><ul>
<li><p>先杀死之前的jar包进程：</p>
<pre><code class="bash">ps -aux | grep java
kill -9 进程号
</code></pre>
</li>
<li><p>查看tomcat的部署路径，拷贝ruoyi.war到该tomcat的webapps路径下：</p>
<pre><code class="bash">cd /tomcat/webapps
cp /ruoyi/ruoyi.war ./
</code></pre>
</li>
<li><p>重启tomcat：<code>tomcat.service restart</code>，其自动生成了ruoyi文件夹。</p>
<p><img src="http://cdn.rongshen2020.com/2020630a23.png"></p>
</li>
<li><p>但是，访问后端主机的该端口，还是如下图所示，不能直接以根目录进行访问：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a24.png"></p>
</li>
<li><p>进入tomcat安装包的配置文件server.xml中修改配置：</p>
<pre><code class="bash">&lt;Context path=&quot;/&quot; docBase=&quot;/usr/local/tomcat/webapps/ruoyi&quot; reloadable=&quot;false&quot;&gt;&lt;/Context&gt;
</code></pre>
<p><img src="http://cdn.rongshen2020.com/2020630a25.png"></p>
</li>
<li><p>再重新启动下tomcat。</p>
</li>
</ul>
<h3 id="7-2-3-配置Nginx代理和转发"><a href="#7-2-3-配置Nginx代理和转发" class="headerlink" title="7.2.3. 配置Nginx代理和转发"></a>7.2.3. 配置Nginx代理和转发</h3><ul>
<li><p>配置前端中的nginx.conf：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a26.png"></p>
</li>
<li><p>代理转发也配置一下：</p>
<p><img src="http://cdn.rongshen2020.com/2020630a27.png"></p>
</li>
<li><p>重启nginx。</p>
</li>
</ul>
<h3 id="7-2-4-多实例集群部署"><a href="#7-2-4-多实例集群部署" class="headerlink" title="7.2.4. 多实例集群部署"></a>7.2.4. 多实例集群部署</h3><ul>
<li><p>安装之前的7.2.2中war包部署的方式，将所有的后端主机中全部使用war包部署。之后通过设置前端主机的nginx的代理和转发，实现多集群部署和负载均衡。也就是之前的这张图片设想的那样。</p>
<p><img src="http://cdn.rongshen2020.com/2020630a2.png"></p>
</li>
</ul>

      
    </div>
    
    
    <div class="article-category">
      
        <b>Categories:</b>
        <a class="article-category-link" href="/categories/%E5%AE%9E%E9%AA%8C/">实验</a>
      
      
        <br/>
      
      
        <b>Tags:</b>
        <a class="article-tag-none-link" href="/tags/%E5%AE%9E%E9%AA%8C/" rel="tag">实验</a>
      
    </div>
    
    
  </div>
</article>

  
<nav id="article-nav" class="article-nav">
  
    <a href="/2020/07/26/mybatis3%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" id="article-nav-newer" class="article-nav-link-wrap newer">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          mybatis3学习笔记
        
      </div>
    </a>
  
  
    <a href="/2020/06/22/%E5%85%B3%E4%BA%8Eambari%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91-%E9%9B%86%E6%88%90%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3/" id="article-nav-older" class="article-nav-link-wrap older">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">
        
          关于ambari二次开发-集成自定义组件的一些理解
        
      </div>
    </a>
  
</nav>






    </div>
  </div>
  




<div id="settings-container">
  <div id="dark-mode">dark</div>
  <div id="sans-font">sans</div>
</div>
<script type="text/javascript">
let d=document,r=d.documentElement.style,f=r.setProperty.bind(r),l=localStorage,s=l.getItem('s')||(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches),n=l.getItem('n'),m=d.getElementById("dark-mode"),b=()=>{f('--bg-color','#fafafa');f('--code-bg-color','#f4f4f4');f('--text-color','#212121');f('--secondary-color','#808080');f('--tertiary-color','#b0b0b0');f('--link-color','#b5c8cf');f('--link-hover-color','#618794');f('--link-bg-color','#dae4e7');f('--selection-color','#dae4e7');m.innerHTML="dark"},c=()=>{f('--bg-color','#212121');f('--code-bg-color','#292929');f('--text-color','#fff');f('--secondary-color','#c0c0c0');f('--tertiary-color','#6e6e6e');f('--link-color','#4d6b75');f('--link-hover-color','#96b1bb');f('--link-bg-color','#5d828e');f('--selection-color','#acc1c9');m.innerHTML="light"},o=d.getElementById("sans-font"),e=()=>{f('--body-stack','"Lora", "Georgia", "Times New Roman", serif');o.innerHTML="sans"},g=()=>{f('--body-stack','"Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Verdana", sans-serif');o.innerHTML="serif"};m.onclick=()=>{if(s==2){s=1;l.setItem('s',s);c()}else{s=2;l.setItem('s',s);b()}};o.onclick=()=>{if(n==2){n=1;l.setItem('n',n);g()}else{n=2;l.setItem('n',n);e()}};if(!s){s=2;l.setItem('s',2)};if(s==1){c()};if(!n){n=2;l.setItem('n',2)};if(n==1){g()};
</script>




</body>
</html>
